<template>
  <div>
    <a-modal
      :title="`${tabData.tenantId}账单`"
      @cancel="cancel"
      @ok="handleOk"
      width="40%"
      :visible="visible"
    >
      <div slot="footer" class="modal-footer">
        <a-button @click="cancel">取消</a-button>
        <a-button type="primary" @click="handleOk">重新生成账单</a-button>
      </div>

      <div>
        <div>
          账单计算日期：<span style="margin-right: 10px">{{
            tabData.billTitleC
          }}</span
          >币种：{{ tabData.billCurrency }}
        </div>
      </div>
      <div class="bill-table">
        <div class="table-item">
          <div>费用类型</div>
          <div>物流运费</div>
          <div>订单处理费</div>
          <div>代发仓租</div>
          <div>转运仓租</div>
          <div>退件仓租</div>
          <div>其他费用</div>
        </div>
        <div class="table-item">
          <div>费用金额</div>
          <div>{{ tabData.freightMoney }}</div>
          <div>{{ tabData.handleMoney }}</div>
          <div>{{ tabData.oneSendRentMoney }}</div>
          <div>{{ tabData.transportRentMoney }}</div>
          <div>{{ tabData.returnPartsRentMoney }}</div>
          <div>{{ tabData.otherMoney }}</div>
        </div>
        <!-- <div class="table-item">
          <div>折扣</div>
          <div>{{}}</div>
          <div>{{}}</div>
          <div>{{}}</div>
          <div>{{}}</div>
          <div>{{}}</div>
          <div>{{}}</div>
        </div> -->
      </div>
      <div class="num-total">
        总费用：<span>{{ tabData.totalMoney }}</span>
      </div>
      <div class="num-total">
        折扣后实付金额：<span>{{ tabData.actualPrice }}</span>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { clientBill_resetBill } from "@/apis/system/FinanceManagement/clientBill";
export default {
  data() {
    return {
      visible: false,
      tabData: {},
    };
  },
  mounted() {
    this.$bus.$off("showModal");
    this.$bus.$on("showModal", (data) => {
      this.tabData = data;
      this.visible = true;
    });
  },
  methods: {
    cancel() {
      setTimeout(() => {
        this.$parent.getCBillTableList(this.tabData.tenantId);
      });
      this.visible = false;
    },
    async handleOk() {
      this.tabData.startTimeValue = `${this.tabData.periodStartTime} 00:00:00`;
      this.tabData.endTimeValue = `${this.tabData.periodEndTime} 23:59:59`;
      let res = await clientBill_resetBill(this.tabData.tenantId, this.tabData);
      if (res.code == "10000") {
        this.tabData = res.responseBody;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.modal-footer {
  display: flex;
  align-items: center;
  justify-content: center;
}
.bill-table {
  display: flex;
  border: 1px solid #e8e8e8;
  justify-content: space-around;
  .table-item {
    flex: 1;
    border-right: 1px solid #e8e8e8;
    div {
      border-bottom: 1px solid #e8e8e8;
      width: 100%;
      line-height: 30px;
      text-align: center;
    }
    div:last-child {
      border-bottom: 0;
    }
  }
  .table-item:last-child {
    border-right: 0;
  }
}
.num-total {
  padding: 0 0 0 10px;
  line-height: 30px;
  border: 1px solid #e8e8e8;
  border-top: 0;
}
</style>